<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/main.css" />
		<script src="js/tailwindcss.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<div class="mui-input-row mui-search">
				<input type="search" class="mui-input-clear" placeholder="">
			</div>
		</header>
		<div class="mui-content">
			<!-- 轮播图 -->
			<div class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!--支持循环，需要重复图片节点-->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<img src="./images/banner-04.jpg" alt="" srcset="" style="width: 100%;" />
					</div>
					<div class="mui-slider-item">
						<img src="./images/banner-01.jpg" alt="" srcset="" style="width: 100%;" />
					</div>
					<div class="mui-slider-item">
						<img src="./images/banner-02.jpg" alt="" srcset="" style="width: 100%;" />
					</div>
					<div class="mui-slider-item">
						<img src="./images/banner-03.jpg" alt="" srcset="" style="width: 100%;" />
					</div>
					<div class="mui-slider-item">
						<img src="./images/banner-04.jpg" alt="" srcset="" style="width: 100%;" />
					</div>
					<!--支持循环，需要重复图片节点-->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<img src="./images/banner-01.jpg" alt="" srcset="" style="width: 100%;" />
					</div>
				</div>
			</div>
			<!-- 九宫格 -->
			<div class="mall-grid">
				<ul class="mui-table-view mui-grid-view mui-grid-9 ">
					<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon">
								<img src="images/ico_31.png" alt="" style="width: 1.875rem;height: 1.875rem;" />
							</span>
							<div class="mui-media-body">啤酒</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon">
								<img src="images/ico_32.png" alt="" style="width: 1.875rem;height: 1.875rem;" />
							</span>
							<div class="mui-media-body">白酒</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon">
								<img src="images/ico_33.png" alt="" style="width: 1.875rem;height: 1.875rem;" />
							</span>
							<div class="mui-media-body">精酿原浆</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon">
								<img src="images/ico_34.png" alt="" style="width: 1.875rem;height: 1.875rem;" />
							</span>
							<div class="mui-media-body">葡萄酒</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon">
								<img src="images/ico_35.png" alt="" style="width: 1.875rem;height: 1.875rem;" />
							</span>
							<div class="mui-media-body">洋酒</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon">
								<img src="images/ico_36.png" alt="" style="width: 1.875rem;height: 1.875rem;" />
							</span>
							<div class="mui-media-body">口粮酒</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon">
								<img src="images/ico_37.png" alt="" style="width: 1.875rem;height: 1.875rem;" />
							</span>
							<div class="mui-media-body">低度潮饮</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon">
								<img src="images/ico_38.png" alt="" style="width: 1.875rem;height: 1.875rem;" />
							</span>
							<div class="mui-media-body">保健酒</div>
						</a>
					</li>
				</ul>
			</div>

			<div class="goods">
				<div class="goods-item">
					<a href="goods-details.html">
						<img src="./images/pic_01.jpg" alt="" class="goods-img" />
						<div class="goods-item-content">
							<div class="goods-title">Cointreau君度甜橙力娇酒利口酒小酒伴50ml</div>
							<div class="goods-lable"><span>热销 1000+</span><span>近7天浏览过千</span><span>大家都在买</span></div>
							<div class="goods-price-group">
								<div><span>到手价￥</span>
									<span class="price">399.00</span>
								</div>
								<span>￥499.00</span>
							</div>
						</div>
					</a>
				</div>
				<div class="goods-item">
					<a href="goods-details.html">
						<img src="./images/banner-01.jpg" alt="" class="goods-img" />
						<div class="goods-item-content">
							<div class="goods-title">Cointreau君度甜橙力娇酒利口酒小酒伴50ml</div>
							<div class="goods-lable"><span>热销 1000+</span></div>
							<div class="goods-price-group">
								<div><span>到手价￥</span>
									<span class="price">399.00</span>
								</div>
								<span>￥499.00</span>
							</div>
						</div>
					</a>
				</div>
				<div class="goods-item">
					<a href="goods-details.html">
						<img src="./images/pic_03.jpg" alt="" class="goods-img" />
						<div class="goods-item-content">
							<div class="goods-title">Cointreau君度甜橙力娇酒利口酒小酒伴50ml</div>
							<div class="goods-lable"><span>近7天浏览过千</span>
								<span>热销 1000+</span>

							</div>
							<div class="goods-price-group">
								<div><span>到手价￥</span>
									<span class="price">399.00</span>
								</div>
								<span>￥499.00</span>
							</div>
						</div>
					</a>
				</div>
				<div class="goods-item">
					<img src="./images/pic_04.jpg" alt="" class="goods-img" />
					<div class="goods-item-content">
						<div class="goods-title">Cointreau君度甜橙力娇酒利口酒小酒伴50ml</div>
						<div class="goods-lable"><span>热销 1000+</span></div>
						<div class="goods-price-group">
							<div><span>到手价￥</span>
								<span class="price">399.00</span>
							</div>
							<span>￥499.00</span>
						</div>
					</div>
				</div>
				<div class="goods-item">
					<a href="goods-details.html">
					<img src="./images/pic_05.jpg" alt="" class="goods-img" />
					<div class="goods-item-content">
						<div class="goods-title">Cointreau君度甜橙力娇酒利口酒小酒伴50ml</div>
						<div class="goods-lable"><span>近7天浏览过千</span><span>热销 1000+</span></div>
						<div class="goods-price-group">
							<div><span>到手价￥</span>
								<span class="price">399.00</span>
							</div>
							<span>￥499.00</span>
						</div>
					</div>
					</a>
				</div>
				<div class="goods-item">
					<a href="goods-details.html">
					<img src="./images/pic_06.jpg" alt="" class="goods-img" />
					<div class="goods-item-content">
						<div class="goods-title">Cointreau君度甜橙力娇酒利口酒小酒伴50ml</div>
						<div class="goods-lable"><span>近7天浏览过千</span><span>热销 1000+</span></div>
						<div class="goods-price-group">
							<div><span>到手价￥</span>
								<span class="price">399.00</span>
							</div>
							<span>￥499.00</span>
						</div>
					</div>
					</a>
				</div>
				<div class="goods-item">
					<a href="goods-details.html">
					<img src="./images/pic_07.jpg" alt="" class="goods-img" />
					<div class="goods-item-content">
						<div class="goods-title">Cointreau君度甜橙力娇酒利口酒小酒伴50ml</div>
						<div class="goods-lable"><span>热销 1000+</span></div>
						<div class="goods-price-group">
							<div><span>到手价￥</span>
								<span class="price">399.00</span>
							</div>
							<span>￥499.00</span>
						</div>
					</div>
					</a>
				</div>
				<div class="goods-item">
					<a href="goods-details.html">
					<img src="./images/pic_08.jpg" alt="" class="goods-img" />
					<div class="goods-item-content">
						<div class="goods-title">Cointreau君度甜橙力娇酒利口酒小酒伴50ml</div>
						<div class="goods-lable"><span>热销 1000+</span></div>
						<div class="goods-price-group">
							<div><span>到手价￥</span>
								<span class="price">399.00</span>
							</div>
							<span>￥499.00</span>
						</div>
					</div>
					</a>
				</div>
				<div class="goods-item">
					<a href="goods-details.html">
					<img src="./images/banner-02.jpg" alt="" class="goods-img" />
					<div class="goods-item-content">
						<div class="goods-title">Cointreau君度甜橙力娇酒利口酒小酒伴50ml</div>
						<div class="goods-lable"><span>热销 1000+</span></div>
						<div class="goods-price-group">
							<div><span>到手价￥</span>
								<span class="price">399.00</span>
							</div>
							<span>￥499.00</span>
						</div>
					</div>
					</a>
				</div>
				<div class="goods-item">
					<a href="goods-details.html">
					<img src="./images/pic_06.jpg" alt="" class="goods-img" />
					<div class="goods-item-content">
						<div class="goods-title">Cointreau君度甜橙力娇酒利口酒小酒伴50ml</div>
						<div class="goods-lable"><span>热销 1000+</span></div>
						<div class="goods-price-group">
							<div><span>到手价￥</span>
								<span class="price">399.00</span>
							</div>
							<span>￥499.00</span>
						</div>
					</div>
					</a>
				</div>
			</div>

		</div>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" href="index.html">
				<span class="mui-icon">
					<img src="./images/ico_02.png" alt="" srcset="" />
				</span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item " href="recommend.html">
				<span class="mui-icon">
					<img src="./images/ico_04.png" alt="" srcset="" />
				</span>
				<span class="mui-tab-label">推荐</span>
			</a>
			<a class="mui-tab-item mui-active">
				<span class="mui-icon">
					<img src="./images/ico_05_01.png" alt="" srcset="" />
				</span>
				<span class="mui-tab-label">商城</span>
			</a>
			<a class="mui-tab-item " href="blind-box.html">
				<span class="mui-icon">
					<img src="./images/ico_03.png" alt="" srcset="" />
				</span>
				<span class="mui-tab-label">盒柜</span>
			</a>
			<a class="mui-tab-item " href="me.html">
				<span class="mui-icon">
					<img src="./images/ico_01.png" alt="" srcset="" />
				</span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
			mui('body').on('tap', 'a', function() {
				document.location.href = this.href;
			});
			var gallery = mui('.mui-slider');
			gallery.slider({
				interval: 2000 //自动轮播周期，若为0则不自动播放，默认为0；
			});
		</script>
	</body>

</html>